<template>
    <Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row class="query-form" style="padding-top: 15px">
                <Col span="8">
                    <FormItem label="审计任务：" >
                        <Input class="query-form-el"  type="text" v-model="form1.missionName" ></Input>
                    </FormItem>
                </Col>
                <!--
                <Col span="8">
                    <FormItem label="组长姓名：" >
                        <Input class="query-form-el"  type="text" v-model="form1.groupLeaderName" ></Input>
                    </FormItem>
                </Col>
                
                <Col span="8">
                    <FormItem label="审计单位："  >
                        <Select class="query-form-el" filterable v-model="form1.locationId"  >
                            <Option v-for="item in locationList" :value="item.codingCodeId" :key="item.codingCodeId">{{ item.codingName }}</Option>
                        </Select>
                    </FormItem>
                </Col>-->
                <Col span="8">
                    <Button @click="reset" class="ivu-btn-reset"  >重置</Button>
                    <Button   class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>

            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="openSelect">新增</Button>
                </Col>
            </Row>
        </Form>

        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据！"  :loading="buttonLoading" size="small"
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>

        <Modal  :title='add ? "审计评价新增":"审计评价修改"' :transfer=false v-model="model1"  :width=600 >
            <div style="height:500px;overflow-y:auto">
                    <Form ref="form1datacopy" :model="form1datacopy" :rules="ruleCustom"  label-position="top">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23" >
                                <FormItem label="审计任务：" >
                                   <div v-if="!add"> {{form1datacopy.missionName}}</div>
                                    <Input v-if="add" v-model="form1datacopy.missionName" :readonly="true" @on-focus="missionSelectModal=true"/>
                                        <!--<Button slot="append" @click="missionSelectModal=true" icon="ios-search"></Button>-->
                                    <!--</Input>-->
                                </FormItem>
                            </Col>
                        </Row>
                        
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23" >
                                <FormItem label="审计单位：">
                                    {{form1datacopy.auditedOrgName}}
                                </FormItem>
                            </Col>

                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11">
                                <FormItem label="组长：" prop="groupLeaderName">
                                    {{form1datacopy.groupLeaderName}}
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="审计得分：" prop="appraiseScore">
                                    <InputNumber style="width:100%" v-model="form1datacopy.appraiseScore" ></InputNumber>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11" >
                                <FormItem label="开始时间：">
                                    {{form1datacopy.planStart?formatDate(new Date(form1datacopy.planStart), 'yyyy-MM-dd'):''}}
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="结束时间：" >
                                    {{form1datacopy.planEnd?formatDate(new Date(form1datacopy.planEnd), 'yyyy-MM-dd'):''}}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11" >
                                <FormItem label="审计等级：" >
                                    <Select v-model="form1datacopy.appraiseRank"  @on-change="changeSelect" label-in-value>
                                        <Option v-for="item in auditRanks" :value="item.id" :key="item.id">{{ item.name }}</Option>
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span="11" >
                            </Col>
                        </Row>

                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23" >
                                <FormItem label="评价说明：" prop="appraiseExplain">
                                    <Input v-model="form1datacopy.appraiseExplain" type="textarea" :rows="4" />
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11" >
                                <FormItem label="创建人：" prop="planStart">
                                    {{form1datacopy.createUserName}}
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="创建时间：" prop="planEnd">
                                    {{form1datacopy.createDate}}
                                </FormItem>
                            </Col>
                        </Row>
                        <!--
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="安全审计报告：">

                                    <div>
                                        <Upload ref="upload"
                                                :before-upload="beforeUpload"
                                                :show-upload-list="true"
                                                :max-size="10240"
                                                multiple
                                                type="drag"
                                                :action="fileUrl">
                                            <div style="padding: 20px">
                                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                                <p>点击将文件拖拽到这里上传</p>
                                                <span style="font-size:8px;color: #797a64">支持扩展名：.docx .pdf</span>
                                            </div>
                                        </Upload>
                                    </div>
                                   
                                    <div v-if="upLoadList1.length > 0">
                                    <div v-for="item in upLoadList1" :key='item.id'>
                                       
                                        <a @click="downloadFile(form1datacopy.appraiseId,item)"><span
                                                style="color: #3399ff;margin-left: 5px"> {{ item.fileName }}</span>
                                        </a>
                                        <a @click="remove1(form1datacopy.appraiseId)"><span
                                                style="color: #3399ff;margin-left: 5px">删除</span>
                                        </a>
                                        
                                    </div>
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>-->
                    </Form>
            </div>
                    <div slot="footer">
                        <Button class='ivu-btn-save' @click="submit('form1datacopy')" >确定</Button>
                        <Button class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                    </div>
                
        </Modal>
        <Modal title="审计评价详情" v-model="model2"  class="modal-view-detail"  :width=800 >
           
                    <Form  :model="showdata" :label-width="160" >
                        <Row type="flex" justify="space-around" >
                            <Col span="23" >
                                <FormItem label="审计任务：" prop="stdOrgName">
                                    {{showdata.missionName}}
                                </FormItem>
                            </Col>
                        </Row>

                        <Row type="flex" justify="space-around">
                            <Col span="23" >
                                <FormItem label="审计单位：" >
                                    {{showdata.auditedOrgName}}
                                </FormItem>
                            </Col>

                        </Row>
                        <Row type="flex" justify="space-around" >
                            <Col span="11" >
                                <FormItem label="组长：" prop="location" >
                                    {{showdata.groupLeaderName}}
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="审计得分：" >
                                    {{showdata.appraiseScore}}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" >
                            <Col span="11" >
                                <FormItem label="开始时间：" >
                                    {{formatDate(new Date(showdata.planStart), 'yyyy-MM-dd')}}
                                </FormItem>
                            </Col>
                            <Col span="11">
                                <FormItem label="结束时间：">
                                    {{formatDate(new Date(showdata.planEnd), 'yyyy-MM-dd')}}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11" >
                                <FormItem label="审计等级：" >
                                    {{showdata.appraiseRank}}
                                </FormItem>
                            </Col>
                            <Col span="11" >
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" >
                            <Col span="23" >
                                <FormItem label="评价说明：" >
                                    {{showdata.appraiseExplain}}
                                </FormItem>
                            </Col>
                            <Col span="11">
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="11" >
                                <FormItem label="创建人：" prop="planStart">
                                    {{showdata.createUserName}}
                                </FormItem>
                            </Col>
                            <Col span="11" >
                                <FormItem label="创建时间：" prop="planEnd">
                                    {{showdata.createDate}}
                                </FormItem>
                            </Col>
                        </Row>

                        <!--
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label="附件：">
                                    <div v-if="upLoadList1.length > 0">
                                        <a @click="downloadFile('',upLoadList1[0])"><span
                                            style="color: #3399ff;margin-left: 5px">{{ upLoadList1[0].fileName }}</span>
                                        </a>
                                    </div>
                                </FormItem>
                            </Col>
                        </Row>-->
                    </Form>
                    <div slot="footer">
                        <Button class='ivu-btn-save' @click="onCancel">关闭</Button>
                    </div>
        </Modal>

        <Modal title="审计任务选择" :transfer=false footer-hide v-model="missionSelectModal"  :width=900 >
            <missionSelect  :filterState="-1" ref="selMission" @selectMission="selectMission" >
            </missionSelect>
        </Modal>

    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js' 
    import {sessionStorage} from '@/common/cacheUtils.js';
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import missionSelect from "./missionSelectAppraise.vue"

    export default {
        components:{
            cascaderDom,missionSelect
        },
        data(){
            return{
                fileUrl: Api.interestedPartiesUserFile,
                auditTypes:[
                    {id:'1',name:"集团审核"},
                    {id:'2',name:"二级集团审核"},
                    {id:'3',name:"自评价"}
                    ],
                auditRanks:[
                    {id:'A',name:"A"},
                    {id:'B',name:"B"},
                    {id:'C',name:"C"},
                    {id:'D',name:"D"}
                    ],
                missionSelectModal:false,
                upLoadList1: [],
                appStatusList:[],
                locationList:[],
                stdRankList:[],
                downloadUrl:Api.downloadMongoFile,
                upUrl:Api.uploadMongoFile,
                form1: {
                },
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1,
                },
                dataTable:[],
                columns1: [
                    {
                        title: "序号",
                        width: 80,
                        align: "center",
                        fixed: 'left',
                        render: (h, params) => {
                            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                        }
                    },
                     {
                        title: '审计任务',
                        minWidth: 250,
                        align: 'center',
                        key:'missionName',
                    },
                    {
                        title: '评价人',
                        minWidth: 100,
                        align: 'center',
                        key:'appraiser',
                    },
                    {
                        title: '审计单位',
                        minWidth: 250,
                        align: 'center',
                        key:'auditedOrgName',
                    },
                    {
                        title: '审计得分',
                        minWidth: 200,
                        align: 'center',
                        key:'appraiseScore',
                    },
                    {
                        title: '审计等级',
                        minWidth: 200,
                        align: 'center',
                        key:'appraiseRank',
                    },
                    {
                        title: '开始时间',
                        minWidth: 150,
                        align: 'center',
                        key:'planStart',
                        render:(h,params)=>{
                            return h('div',[
                                (this.formatDate(new Date(params.row.planStart), 'yyyy-MM-dd'))
                            ]);
                        }
                    },
                    {
                        title: '结束时间',
                        minWidth: 150,
                        align: 'center',
                        key:'appDate',
                        render:(h,params)=>{
                            return h('div',[
                                (this.formatDate(new Date(params.row.planEnd), 'yyyy-MM-dd'))
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        minWidth: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.showData(params,1);
                                        }
                                    }
                                }, '详情'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.showData(params,2);
                                        }
                                    }
                                }, '修改'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color:'red'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteData(params);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },

                ],
                ruleCustom : {
                    appraiseScore: [{
                        validator: (rule, value, callback) => {
                            if (value == null || value == '' || value == undefined) {
                                callback(' ')
                            } else if (value <0) {
                                callback(' ')
                            }else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change'
                    }],
                   
                },
                auditedOrgName:'',
                auditedOrgId:'',
                add:false,
                model1:false,
                model2:false,
                showdata: {},
                location:null,
                form1datacopy:{
                    appraiseScore:0,
                    appraiseRank:''
                },
                files :[],
                buttonLoading:false,tableHeight:10,
            }
        },
        mounted() {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            //this.selectCodingSort();
            this.query();
        },
        methods:{
            downloadFile(guideId, file) {
                let url = this.fileUrl + '/file/' + file.id;
                this.$http.get(url, {
                    responseType: 'blob'      //告诉服务器我们需要的响应格式
                }).then((res) => {
                    console.log(res)
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = file.fileName //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                })
            },
            remove1(id) {
                console.log(id)
                let url = this.fileUrl + '/file/' + id;
                this.$http.delete(url).then((res) => {
                    this.getFiles(id)
                })
            },
            getFiles(id) {
                this.upLoadList1 = []
                let url = this.fileUrl + '/' + id + '/files/adtReport'
                this.$http.get(url).then((res) => {
                    if (res.data.result == "success") {
                        if(res.data.data && res.data.data.length>0){
                            this.upLoadList1.push(res.data.data[0]) 
                        }
                    }
                })
            },
            beforeUpload(file) {
                let formData = new FormData();
                formData.append("files", file); // 文件对象
                let url = this.fileUrl + '/' + this.form1datacopy.appraiseId + '/files/adtReport'
                this.$http.post(url, formData).then((res) => {
                    if (res.data.result == "success") {
                        this.$Message.info("文件上传成功")
                        this.getFiles(this.form1datacopy.appraiseId);
                    }
                })
                return false
            },
            changeSelect(val){
                console.log('this.form1datacopy.appraiseRank=',val)
                this.form1datacopy.appraiseRank = val.id 
            },
            onCancel() {
                this.model2 = false
            },
            closeModal1(){
                this.expertSelectModal = false;
            },

            selectMission(row){
                this.missionSelectModal = false
                this.form1datacopy = {
                    appraiseId: this.get_uuid(),
                    missionName: row.missionName,
                    appraiseScore:1,
                    missionId: row.missionId,
                    auditTypeName: row.auditTypeName,
                    groupLeaderName: row.groupLeaderName,
                    auditedOrgName: row.auditedOrgName,
                    planStart: row.planStart,
                    planEnd: row.planEnd,
                    createDate: this.formatDate(new Date(), 'yyyy-MM-dd'),
                    createUserName: userName
                };
            },
            deleteFile(index){
                this.files.splice(index,1);
            },
            deleteData(params) {
                this.$Modal.confirm({
                    title: '数据删除',
                    content: '<p>确定删除该条信息</p>',
                    okText: '确认',
                    onOk: () => {
                        let url = Api.deleteAdtAppraise;
                        this.$http.get(url,  {params: {id:params.row.appraiseId}}).then((res) => {
                            if (res.status === 200) {
                                this.$Message.success('成功');
                                this.query()
                            }else if (res.data.status === 201) {
                                this.$Message.error(res.data.msg);

                            }
                        }).catch(e => {
                            this.$Message.error('请求失败' + e);
                        })
                    },
                    cancelText: '取消'
                });
            },

            openSelect(){
                let userName = JSON.parse(sessionStorage('paramUserInfo').get('userInfo'))["createUserName"]
                this.form1datacopy = {
                    createDate: this.formatDate(new Date(), 'yyyy-MM-dd'),
                    createUserName: userName
                };
                this.model1 = true;
                this.add = true;
            },
            pageChange(pageNum) {
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            handleCancel() {
                this.form1datacopy = {

                };
                this.model1 = false;
            },
            selectCodingSort(){
                this.$http.get(Api.queryCodeDetailBySortId + '/AS-000001', {params: {}}).then((res) => {
                    this.appStatusList = res.data.data;
                });
                this.$http.get(Api.queryCodeDetailBySortId + '/REGION-000001', {params: {}}).then((res) => {
                    this.locationList = res.data.data;
                });
                this.$http.get(Api.queryCodeDetailBySortId + '/SSL-000001', {params: {}}).then((res) => {
                    this.stdRankList = res.data.data;
                });

            },
            reset() {
                this.form1 = {};
                this.query();


            },
            query() {
                this.buttonLoading=true
                let userId = sessionStorage('userId').getObject('userId').userId;
                let orgId = sessionStorage('userId').getObject('userId').orgInfo.orgId;
                let data = {
                    startPage: this.pagedata.currentPage,
                    size: this.pagedata.pageSize,
                    orgId:orgId
                };
                data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
                data.missionName = this.form1.missionName || ''
                let url = Api.queryAdtAppraise;
                this.$http.get(url, {params: data}).then((res) => {
                    this.dataTable = res.data.data;
                    this.pagedata.total = res.data.data.totalSize;
                    this.buttonLoading=false
                }).catch(e => {
                    console.error(e)
                    this.$Message.error("数据获取失败")
                })
            },
            showData(data, flag) {
                this.getFiles(data.row.appraiseId)
                this.auditedOrgId  = data.row.auditedOrgId;
                this.auditedOrgName = data.row.auditedOrgName;
                data.row.createDate =  this.formatDate(new Date(data.row.createDate), 'yyyy-MM-dd')
                if (flag == 1) {
                    //查看页面
                    // this.$http.get(Api.interestedPartiesUserFile+"/"+data.row.standardId +"/files/file", ).then((res) => {
                    //     this.files = res.data.data;
                    //     console.log(this.files)


                    // }).catch(e => {
                    //     this.$Message.error("数据获取失败")
                    // });
                    this.showdata = data.row;
                    this.model2 = true;
                } else {
                    this.add = false;
                    this.form1datacopy = JSON.parse(JSON.stringify(data.row));

                    this.model1 = true;
                }
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },

            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        //this.form1datacopy.planStart = this.formatDate(new Date(this.form1datacopy.planStart), 'yyyy-MM-dd');
                        //this.form1datacopy.planEnd = this.formatDate(new Date(this.form1datacopy.planEnd), 'yyyy-MM-dd');
                            
                            if(this.add){
                                let userId = sessionStorage('userId').getObject('userId').userId;
                                let orgId = sessionStorage('userId').getObject('userId').orgInfo.orgId;
                                this.form1datacopy.createUserId = userId;
                                this.form1datacopy.createOrgId = orgId;

                                this.$http.post(Api.createAdtAppraise, this.form1datacopy).then((res) => {

                                    if (res.status === 200) {
                                        this.$Message.success('成功');
                                        this.model1 = false;
                                        this.query()

                                    }else if (res.data.status === 201) {
                                        this.$Message.error(res.data.msg);
                                        this.model1 = false;
                                    }

                                }).catch(e => {
                                    this.model1 = false;
                                    this.query();
                                    this.$Message.error("数据获取失败")
                                })
                            }else{
                                let userId = sessionStorage('userId').getObject('userId').userId;
                                let orgId = sessionStorage('userId').getObject('userId').orgInfo.orgId;
                                this.form1datacopy.updateUserId = userId;
                                this.form1datacopy.updateOrgId = orgId;
                                this.$http.post(Api.updateAdtAppraise, this.form1datacopy).then((res) => {
                                    if (res.status === 200) {
                                        this.$Message.success('成功');
                                        this.model1 = false;
                                        this.query()

                                    }else if (res.data.status === 201) {
                                        this.$Message.error(res.data.msg);
                                        this.model1 = false;
                                    }

                                }).catch(e => {
                                    this.model1 = false;
                                    this.query();
                                    this.$Message.error("数据获取失败")
                                })
                            }
                        

                    } else {
                        this.$Message.error('请填报完整!');
                    }
                })
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
            get_uuid() {
                let s = [];
                let hexDigits = "0123456789abcdef";
                for (let i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4";
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
                s[8] = s[13] = s[18] = s[23] = "-";

                let uuid = s.join("");
                let reg = new RegExp("-", "g");
                let a = uuid.replace(reg, "");
                console.log(a);
                return a;
            },
        },
        watch:{

            "uploadList1": function(val1,val2){
                //console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
                //console.log('val1',val1)
                //console.log('val2',val2)

            },
            "model1":function(qw,er){
                if(qw && this.model1){
                    setTimeout(()=>{
                        //this.$refs.trainOrg.setCurrentOrg();

                    },100)
                }else{
                    //this.$refs.trainOrg.setCurrentOrg();

                }
            },
            'form1datacopy.appraiseScore': {
                handler: function() {
                    //console.log(1111,this.form1datacopy.appraiseScore)
                    let appraiseScore = this.form1datacopy.appraiseScore
                    
                    if(appraiseScore<=70){
                        this.form1datacopy.appraiseRank = 'D'
                    }else if(appraiseScore>70 && appraiseScore<80){
                        this.form1datacopy.appraiseRank = 'C'
                    }else if(appraiseScore>=80 && appraiseScore<90){
                        this.form1datacopy.appraiseRank = 'B'
                    }else if(appraiseScore>=90){
                        this.form1datacopy.appraiseRank = 'A'
                    }
                    
                },
            }

        }
    }
</script>

<style lang='css' scoped>
    @import '../../../index.css';
</style>
